<template>
  <div>
    <PageHeader hidden-breadcrumb :tab-list="tabList" :tab-active-key="tabActiveKey" @on-tab-change="tabChange">
        <template #title><div class="demo-title">{{title}}</div></template>
        <template #content>
          <div class="demo-content" style="padding:20px 25% 20px 25%;">
            <Input search enter-button="搜索" placeholder="Enter something..." />
          </div>
        </template>
    </PageHeader>
  </div>
</template>

<script>
export default {
    props:{
        title: String
    },
    data () {
        return {
            tabActiveKey:'',
            disabledGroup:'',
            model:'Henry',
            authors:[
                {
                    value: 'Henry',
                    label: 'Henry'
                },
                {
                    value: 'Back',
                    label: 'Back'
                },
                {
                    value: 'Mon',
                    label: 'Mon'
                },
            ],
            value:[],
            tabList: [
                {
                    label: '文章',
                    name: 'article',
                    path: 'search-article',
                },
                {
                    label: '项目',
                    name: 'projects',
                    path: 'search-projects',
                },
                {
                    label: '应用',
                    name: 'apps',
                    path: 'search-apps',
                }
            ],
        }
    },
    watch:{
       title:{
            immediate: true,
            handler(val) {
                if(val){
                    if(val.includes('文章')){
                        this.tabActiveKey = 'article'
                    }else if(val.includes('项目')){
                        this.tabActiveKey = 'projects'
                    }else if(val.includes('应用')){
                        this.tabActiveKey = 'apps'
                    }
                }
            }
       },
    },
    methods: {
        tabChange(data){
            //this.tabActiveKey = data.label
            this.$router.push({path:data.path})
        },
    }
}
</script>
